<template>
  <div class="ReferralBenefits_box" v-show="containRights.length > 0">
    <div class="list_title">
      <div class="tab_box_color">包含权益</div>
    </div>
    <div class="list_content">
      <div class="bottom_box_list" v-for="item in containRights" :key="item.ID">
        <div class="list_img">
          <img :src="picture(item.MainPicturePath)[0].url" alt="" />
        </div>
        <div class="list_content_right">
          <div>
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.Name"
              placement="top-start"
            >
              <div class="list_text">
                <!-- <span class="mast_go" v-if="item == 2">上海必去</span> -->
                {{ item.Name }}
              </div>
            </el-tooltip>
            <div class="label">
              <span v-for="items in StTArr(item.FlagListName)" :key="items">{{
                items
              }}</span>
            </div>
            <div class="label">数量:x{{ item.EquityCount }}</div>
          </div>
          <div class="msg">
            <div>库存：{{ item.InventoryQuantity }}份</div>
            <div>已售：{{ item.SoldQuantity }}份</div>
            <div class="price">￥{{ item.CostPrice }}</div>
            <div style="color: rgba(201, 201, 201, 1);">
              ￥{{ item.SalePrice }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:
    "referralBenefits" /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */,
  data() {
    return {
      octopus: this.$parent.octopus
    };
  },
  props: {
    containRights: {
      type: Array,
      default: []
    }
  },
  mounted() {},
  methods: {
    StTArr(value) {
      if (value) {
        return value.split(",");
      } else {
        return [];
      }
    },
    picture(Url) {
      if (Url) {
        return JSON.parse(Url);
      } else {
        return "";
      }
    }
  }
};
</script>
<style scoped>
.price {
  font-size: 2.1rem;
  font-weight: 600;
  color: #ff4f17;
  margin-right: 0 !important;
}
.msg {
  display: flex;
  font-size: 1.3rem;
  color: #4b4949;
  margin-top: 0.5rem;
  align-items: baseline;
}
.msg div {
  margin-right: 1rem;
}
.ReferralBenefits_box .list_title {
  font-size: 1.7rem;
  margin-top: 1.8rem;
  border-bottom: 1px solid rgba(30, 27, 25, 0.1);
}
.tab_box_color {
  display: inline-block;
  border-bottom: 4px solid #f78c52;
}

.ReferralBenefits_box .list_content {
  width: 100%;
  display: flex;
  margin-top: 1.5rem;
  overflow-x: auto;
  padding: 10px 0;
}

.ReferralBenefits_box .bottom_box_list {
  /* width: 15%; */
  /* height: calc(33.33% - 1.5rem); */
  margin-right: 6rem;
  box-shadow: 2px 1px 9px 0px rgba(180, 171, 206, 0.25);
  padding: 1.8rem 1.8rem;
  box-sizing: border-box;
  border-radius: 2rem;
  position: relative;
}
.ReferralBenefits_box .list_content .bottom_box_list .list_img {
  width: 10.7rem;
  height: 10.7rem;
  border-radius: 2rem;
  overflow: hidden;
  margin-right: 2.3rem;
}

.ReferralBenefits_box .list_content .bottom_box_list .list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ReferralBenefits_box .list_content .bottom_box_list .list_content_right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ReferralBenefits_box .list_content .bottom_box_list {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.ReferralBenefits_box .list_content .bottom_box_list .list_text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  font-size: 1.7rem;
  margin: 0.2rem 0;
  color: #1e1b19;
}
.ReferralBenefits_box .mast_go {
  font-size: 1.4rem;
  /* background-color: #F87338; */
  color: #fff;
  padding: 0.2rem 0.5rem;
  vertical-align: middle;
  margin-right: 0.8rem;
  border-radius: 3px;
  background: linear-gradient(to right, #ed5757, #ff9e67);
}
.ReferralBenefits_box .list_content .bottom_box_list .label span {
  font-size: 1rem;
  color: #426ce9;
  border-radius: 0.2rem;
  border: 1px solid rgba(66, 108, 233, 1);
  padding: 0 4px;
  margin: 0 2px;
}
.ReferralBenefits_box .list_content .add_icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4.2rem;
}
.ReferralBenefits_box .list_content .add_icon img {
  width: 2.6rem;
}
>>> .el-carousel__item {
  background: #fff;
  border-radius: 10rem;
}
</style>
